<template>
	<view class="login">
		<view class="bgimg">
			<view class="login-items bg-white auto borderbox">
				<!-- logo图部分 -->
				<view class="logo dflex alc jcc pt34">
					<view class="logo-one mr10"></view>
					<view class="logo-two"></view>
				</view>
				<!-- 输入框部分 -->
				<view class="input mt60">
					<view>
						<u-field
							v-model="mobile"
							label="手机账号"
							placeholder="请输入手机号"
							placeholder-style="color:#BBBBBB;fontSize:32rpx"
						></u-field>
					</view>
					<view>
						<u-field
							v-model="password"
							label="登录密码"
							type="password"
							placeholder="请输入登录密码"
							placeholder-style="color:#BBBBBB;fontSize:32rpx"
						></u-field>
					</view>
				</view>  
				<!-- 登录按钮 -->
				<view class="btn white fs38 textc auto" @click="handerLogin">登 &nbsp; 录</view>
				<!-- 忘记密码 注册 -->
				<view class="register dflex jcsb">
					<view class="color6 fs28" style="opacity: 0;">新用户注册</view>
					<view class="color6 fs28" @click="handerSet">忘记密码?</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { login } from '@/utils/api.js';
import { ref,onMounted } from 'vue';
let mobile = ref(''); //手机号
let password = ref(''); //密码
// 登录功能
let handerLogin = () => {
	let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; //声明手机号正则表达式
	//判断
	if (!mobile.value) {
		return uni.showToast({
			title: '手机号不能为空',
			icon: 'none'
		});
	}
	if (!reg.test(mobile.value)) {
		return uni.showToast({
			title: '请输入合法的手机号',
			icon: 'none'
		});
	}
	if (!password.value) {
		return uni.showToast({
			title: '请输入密码',
			icon: 'none'
		});
		0;
	}
	let data = {
		account: mobile.value,
		password: password.value
	};
	login(data).then(res => {
		if (res.code === 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			uni.setStorageSync('token', res.data.userinfo.token);
			uni.setStorageSync('userInfo', JSON.stringify(res.data.userinfo));
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1000);
		} else {
			return uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
	});
};
// 注册页面
let handerReg = () => {
	uni.navigateTo({
		url: '/pages/register/register'
	});
};
// 修改密码
let handerSet = () => {
	uni.navigateTo({
		url: '/pages/setpwd/setpwd'
	});
};
//onLoad
onMounted(() => {
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
	if (uni.getStorageSync('token')) {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
})
</script>

<style scoped lang="scss">
.login {
	.bgimg {
		width: 750rpx;
		height: 636rpx;
		background: url('../../static/loginTop .png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 1rpx;
	}
} 
.login-items {
	width: 690rpx;

	border-radius: 30rpx;
	margin-top: 249rpx;
	padding-bottom: 50rpx;
	.logo {
		.logo-one {
			width: 142rpx;
			height: 136rpx;
			background: url('../../static/logo.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.logo-two {
			width: 280rpx;
			height: 73rpx;
			background: url('../../static/logoRight.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-top: 20rpx;
		}
	}
	.input {
		padding-left: 70rpx;
		padding-right: 70rpx;
		:deep(.u-label-text) {
			font-size: 28rpx;
			color: #313131;
		}
		:deep(.u-label) {
			margin-right: 18rpx;
		}
		& > view:nth-child(1) {
			margin-bottom: 48rpx;
		}
	}
	.btn {
		width: 550rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: linear-gradient(137deg, #f65249 0%, #e1251b 100%);
		border-radius: 20rpx;
		margin-top: 68rpx;
	}
	.register {
		padding-left: 106rpx;
		padding-right: 109rpx;
		margin-top: 66rpx;
	}
}
</style>
